<template>
  <div class="dict">
    <div class="dictList">
      <div class="list-div">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" width="80" align="center"></el-table-column>
          <el-table-column prop="name" label="类别" width="200" align="center"></el-table-column>
          <el-table-column prop="describe" align="center" label="描述"></el-table-column>
          <el-table-column fixed="right" label="操作" width="200" align="center">
            <template>
              <el-button type="text" size="small" @click.native="dialogFormVisible = true">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="saveModal">
      <el-dialog title="修改密码" :visible.sync="dialogFormVisible" @open="beforeOpen" width="600px">
        <el-form
          :model="ruleForm2"
          status-icon
          :rules="rules2"
          ref="ruleForm2"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="原始密码" prop="checkOldPwd">
            <el-input
              type="password"
              v-model="ruleForm2.oldPwd"
              autocomplete="off"
              placeholder="请输入原始密码"
              style="width:80%"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="pass">
            <el-input
              type="password"
              v-model="ruleForm2.pass"
              autocomplete="off"
              placeholder="请输入新密码"
              style="width:80%"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm2.checkPass"
              autocomplete="off"
              placeholder="请确认新密码"
              style="width:80%"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm('ruleForm2')">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm2')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "Setting",
  data() {
    //原始密码正误判断及校验
    var checkOldPwd = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入原始密码"));
      } else {
        this.http
          .post("/api/security/login", {
            account: this.account,
            password: this.ruleForm2.oldPwd
          })
          .then(res => {
            if (res.data.code == 200){
              callback();
            }else{
              callback(new Error("输入密码错误"));
            } 
          });
      }
    };
    //判断两次输入密码是否相同
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      tableData: [
        {
          id: "1",
          name: "登录密码",
          describe: "安全性高的密码可以使账号更安全。建议您定期更换密码。"
        }
      ],
      formLabelWidth: "170px",
      ruleForm2: {
        oldPwd: "",
        pass: "",
        checkPass: ""
      },
      rules2: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        checkOldPwd: [{ validator: checkOldPwd, trigger: "blur" }]
      },
      dialogFormVisible: false,
      formName: ""
    };
  },
  mounted() {
    //获取当前用户名
    this.getUserInfo();
  },
  methods: {
    //获取当前用户名
    getUserInfo() {
      this.http.post("/api/security/info", {}).then(res => {
        // console.log(res);
        this.account = res.data.data.user.account;
      });
    },
    //确定之后提交表单并重置该表单
    submitForm(formName) {
      this.formName = formName;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.http.post("/api/sys/user/updatePassword", {
            oldPwd: this.ruleForm2.oldPwd,
            newPwd: this.ruleForm2.checkPass
          });
          this.dialogFormVisible = false;
          this.$refs[formName].resetFields();
          this.$message.success("操作成功");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      
    },
    //取消时重置表单并关闭窗口
    resetForm(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    //打开之前清空字段的赋值
    beforeOpen() {
      this.$refs[this.formName].resetFields();
      this.ruleForm2.oldPwd = "";
      this.ruleForm2.pass = "";
      this.ruleForm2.checkPass = "";
    },
    //修改时打开修改界面
    handleEdit() {
      this.dialogFormVisible = true;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.dict {
  padding: 0 10px;
  .pagination {
    float: right;
  }
}
</style>
